<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display:flex">
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px;">供应商名称</span>
                  <el-input v-model="tableParam.supplierName" style="width:200px;" placeholder="请输入" @keyup.enter.native="gettableData()"></el-input>
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">评价时间</span>
                  <el-date-picker v-model="time" style="width:340px;height:36px" type="datetimerange" unlink-panels start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
                </span>
                <span style="margin-left: 24px;">
                  <span style="margin-right: 12px;">状态</span>
                  <el-select v-model="tableParam.appealStatus" placeholder="请选择" style="width:150px;">
                    <el-option v-for="(item, index) in statusList" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), search()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card">
            <div class="card_nav">
              <div></div>
              <div>
                <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px;">
                  <el-link :underline="false">
                    <span class="el-icon--left">
                      <i class="iconfont iconicon_button_filtrate"></i>
                    </span>
                    筛选
                  </el-link>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in table" :key="index">
                      <el-checkbox v-model="item.status">{{ item.label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
                <template v-for="(item, index2) in table">
                  <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                    <template slot-scope="scope">
                      <div v-if="item.label=='操作'">
                        <el-button v-if="scope.row.appealStatus==1&&ButtonList.findIndex(res=>(res.buttonValue=='PINGJIASS'))!==-1" size="mini" class="bottom_one" @click="changestatus(scope.row.id,2)">评价申诉</el-button>
                      </div>
                      <div v-else-if="item.label=='评价详情'">
                        <el-button size="mini" class="bottom_one" @click="getDetails(scope.row)">评价详情</el-button>
                      </div>
                      <div v-else-if="item.label=='状态'">{{statusList |fromatTable(scope.row.appealStatus,'name','id')}}</div>
                      <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
            <div class="card_bottom">
              <div class="card_bottom_left">
                <div class="top_page_totle">总共{{ total }}条</div>
                <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
              </div>
              <div>
                <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 评价详情 -->
    <el-dialog v-dialogDrag :visible.sync="commentsDialog" width="980px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">供应商评价</span>
      <div class="title-title">
        <div>当前评价周期：{{ commentsData.period }}</div>
        <div>评价分值：{{ commentsData.evaluateSumScore }}</div>
        <div class="color">状态：{{ commentsData.type == 0 ? '未评论' : '已评论' }}</div>
      </div>
      <div style="padding:  0 20px;">
        <template v-for="(item,index) in commentsData.list">
          <div :key="index">
            <div class="dialoginfo-title">
              <div class></div>
              <span>{{item.evaluateTitle}}</span>
              <span style="color:#808080;font-size:14px">(权重：{{item.ratio}})</span>
            </div>
            <div style="padding:20px 0 0 10px">
              <el-radio>{{ item.evaluateOptionScore }}</el-radio>
            </div>
            <el-form label-width="70px" label-position="left" style="width: 820px;padding-top: 20px;">
              <el-form-item>
                <span slot="label" style="font-weight: bold;color:#000">评价内容</span>
                <span style="color:#808080;">{{item.evaluateContent}}</span>
              </el-form-item>
            </el-form>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="commentsDialog=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 评价申诉 -->
    <el-dialog v-dialogDrag :visible.sync="complaintDialog" width="680px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">评价申诉</span>
      <div class="dialoginfo">
        <el-form ref="reffromDate" :rules="rules" :inline="true" :model="complaintData" label-width="80px">
          <el-form-item prop="appealContent">
            <span slot="label" style="color:#FF0000;">申诉描述</span>
            <el-input v-model="complaintData.appealContent" type="textarea" :rows="5" resize="none" placeholder="请输入" style="width:510px" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="complaintDialog=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submitcomplaintData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage2,
  Download,
  evaluate,
  queryDetailById,
} from "@/api/GHnumber/evaquery.js";
export default {
  mixins: [mixin],
  data() {
    return {
      /*表格增删改查及下载接口*/
      queryPage: queryPage2,
      DownloadURL: Download,
      /*表格数据*/
      time: "",
      rules: {
        appealContent: [
          { required: true, message: "请输入申诉描述", trigger: "blur" },
        ],
      },
      table: [
        { label: "评价ID", width: "auto", prop: "code", status: true },
        { label: "供应商", width: "auto", prop: "supplierName", status: true },
        { label: "评价周期", width: "160", prop: "period", status: true },
        {
          label: "评价分值",
          width: "60",
          prop: "evaluateSumScore",
          status: true,
        },
        { label: "评价详情", width: "auto", prop: "", status: true },
        { label: "评价时间", width: "160", prop: "createTime", status: true },
        {
          label: "评价申诉内容",
          width: "120",
          prop: "appealContent",
          status: true,
        },
        { label: "申诉时间", width: "160", prop: "appealTime", status: true },
        { label: "状态", width: "80", prop: "", status: true },
        { label: "操作", width: "120", prop: "", status: true },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex
       */
      pagesType: 0,
      /*添加表单数据*/
      statusList: [
        { name: "正常", id: "1" },
        { name: "申诉中", id: "2" },
        { name: "已接受", id: "3" },
        { name: "已拒绝", id: "4" },
      ],
      commentsDialog: false,
      commentsData: {
        supplierName: "", //供应商名称
        period: "", //周期
        evaluateSumScore: 0,
        pushStatus: 1,
        list: [],
      },
      complaintData: {
        id: "",
        appealContent: "",
        appealStatus: "",
      },
      complaintDialog: false,
    };
  },
  created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = {
      ...this.tableParam,
      supplierId: "",
      appealStatus: "",
      createTime: "",
      updateTime: "",
      pushStatus: 1,
    };
    this.gettableData();
  },
  /*
   *copy(data)深拷贝数据,返回拷贝完的数据
   *gettableData获取列表数据
   *load下载
   *SortNum保持序列号
   * UpdateOrDelete禁用，启用，删除
   * submitFromDate保存更新数据
   */
  methods: {
    init() {
      /*重置数据*/
      this.time = ''
      this.tableParam.supplierName = "";
      this.tableParam.createTime = "";
      this.tableParam.updateTime = "";
      this.tableParam.appealStatus = "";
      this.gettableData();
    },
    search() {
      if (this.time) {
        this.tableParam.createTime = new Date(this.time[0]).Format(
          "yyyy-MM-dd hh:mm:ss"
        );
        this.tableParam.updateTime = new Date(this.time[1]).Format(
          "yyyy-MM-dd hh:mm:ss"
        );
      } else {
        this.tableParam.createTime = "";
        this.tableParam.updateTime = "";
      }
      this.gettableData();
    },
    changestatus(id, type) {
      this.complaintData.id = id;
      this.complaintData.appealStatus = type;
      this.complaintDialog = true;
    },
    submitcomplaintData() {
      evaluate(this.complaintData).then(() => {
        this.complaintDialog = false;
        this.$message({
          message: '提交成功',
          type: 'success'
        });
        this.gettableData();
      });
    },
    getDetails(low) {
      queryDetailById({ id: low.id }).then((res) => {
        this.commentsData.supplierName = low.supplierName;
        this.commentsData.period = low.period;
        this.commentsData.evaluateSumScore = low.evaluateSumScore;
        this.commentsData.list = res.data;
        this.commentsDialog = true;
        console.log(res.data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title-title {
  @include discen_al;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  line-height: 40px;
  .color {
    color: $bg_color;
  }
}
.dialoginfo-title {
  display: flex;
  align-items: center;
  height: 50px;
  > div {
    width: 4px;
    height: 20px;
    background: $bg_color;
  }
  > span {
    padding-left: 10px;
    font-size: 20px;
    color: $bg_color;
    font-weight: 600;
  }
}
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
